<template>
  <body id="login-page">


  <el-form v-if="operate=='login'" :model="loginForm" status-icon :rules="loginRules" ref="LoginForm" label-width="59px" class="login-container" >
    <h3 class="login_title">系统登录</h3>
    <el-form-item label="账号:" prop="loginName">
      <el-input
        type="text"
        v-model="loginForm.loginName"
        auto-complete="off"
        placeholder="账号"
        @keyup.enter.native="submitForm('LoginForm')"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码:" prop="loginPassword">
      <el-input
        type="password"
        v-model="loginForm.loginPassword"
        auto-complete="off"
        placeholder="密码"
        @keyup.enter.native="submitForm('LoginForm')"
      ></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        type="primary"
        style="width: 80%;  border: none;display: inline-block;"
        @click="submitForm('LoginForm')"
      >登录</el-button>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        type="text"
        style="width: 40%;  border: none;display: inline-block;"
        @click="operate='register',loginForm={}"
      >没有账号？去注册</el-button>

    </el-form-item>
  </el-form>
  <el-form v-if="operate=='register'" :model="registerUser"  :rules="registerRules" ref="RegisterForm" label-width="59px" class="login-container" >
    <h3 class="login_title">用户注册</h3>
    <el-form-item label="账号:" prop="userId">
      <el-input
        type="text"
        v-model="registerUser.userId"
        auto-complete="off"
        @keyup.enter.native="submitForm('RegisterForm')"
        placeholder="账号"
      ></el-input>
    </el-form-item>
    <el-form-item label="用户名:" prop="userName">
      <el-input
        type="text"
        v-model="registerUser.userName"
        auto-complete="off"
        placeholder="用户名"
        @keyup.enter.native="submitForm('RegisterForm')"

      ></el-input>
    </el-form-item>

    <el-form-item label="密码:" prop="password">
      <el-input
        type="password"
        v-model="registerUser.password"
        auto-complete="off"
        placeholder="密码"
        @keyup.enter.native="submitForm('RegisterForm')"
      ></el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button
        type="primary"
        style="width: 80%;  border: none;display: inline-block"
        @click="submitForm('RegisterForm')"
      >注册</el-button>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        type="text"
        style="width: 40%;  border: none;display: inline-block;"
        @click="operate='login',registerUser={}"
      >已有账号？去登陆</el-button>
    </el-form-item>
  </el-form>
  </body>
</template>

<script>
  import { userLogin } from "@/api/user";
  import http from '../utils/http'
  export default {
    name: "Login",

    data() {
      var check = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('该项不能为空'));
          }else{
            return callback();
          }
      };
      return {
        loginForm: {
          loginName: "",
          loginPassword: "",
        },
        registerUser:{
          userId:"",
          userName:"",
          password: "",
        },
        operate:"login",
        responseResult: [],
        loginRules: {
          loginName: [
            { validator: check, trigger: 'blur' }
          ],
          loginPassword: [
            { validator: check, trigger: 'blur' }
          ],
        },
        registerRules: {
          userId: [
            { validator: check, trigger: 'blur' }
          ],
          userName: [
            { validator: check, trigger: 'blur' }
          ],
          password: [
            { validator: check, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      login () {
        var _this = this;
        userLogin({
          loginName: this.loginForm.loginName,
          password: this.$md5(this.loginForm.loginPassword),
        }).then((resp) => {
          let code=resp.data.code;
          if(code===200){
            let token=resp.data.data;
            //存储token
            console.log(resp.data.data)
            _this.$store.commit('SET_TOKENN', token);
            sessionStorage.setItem("currentUser",JSON.stringify(token))
            //存储user，优雅一点的做法是token和user分开获取
            _this.$store.commit('SET_USER', token);
            _this.$router.replace({path: "/chatView"});
          }
          if(code==404){
            this.$message.error(resp.data.message)
          }
          if(code==400){
            this.$message.error(resp.data.message)
          }
        });
      },
      register(){
        this.registerUser.password=this.$md5(this.registerUser.password);
        http.get("user/register",this.registerUser).then((resp)=>{
          if(resp.data.code==200){
            this.$message.success(resp.data.message);
            this.operate='login'
            this.registerUser={}
          }else if(resp.data.code==404){
            this.$message.warning(resp.data.message);
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(formName=="LoginForm"){
              this.login()
            }else {
              this.register()
            }
          } else {
            this.$message.warning("请输入完整数据")
            return false;
          }
        });
      },
    },
  };
</script>
<style scoped>
  #login-page {
    /*background: url("../assets/img/bg.jpg") no-repeat;*/
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    margin: auto;
  }
  body {
    margin: 0px;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 400px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login-container .el-form-item{
    width: 80%!important;
    margin-left: auto;
    margin-right: auto;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>
